<template>
  <div class="home">
    <!-- 3.调用子组件---头部样式 -->
    <HomeHeader/>
    <!-- 中间区域 -->
    <main>
      <!-- 3.调用子组件-左侧导航栏 -->
      <HomeSlide/>

      <!-- 右侧：根据菜单链接进行路由的渲染 -->
      <aside>
        <router-view></router-view>
      </aside>
    </main>
  </div>
</template>

<script>
// 1.导入子组件
import HomeHeader from './home/HomeHeader.vue';
import HomeSlide from './home/HomeSlide.vue';
export default {
  name :'HomeCom',
  // 2.注册子组件
  components : {
    HomeHeader,HomeSlide
  }
}
</script>

<style scoped>
.home{
  width: 100%;
  height: 98vh;
  overflow: hidden;
}
.home main{
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.home main aside{
  width: 80%;
  height: 100%;
  background-color: rgb(199, 228, 199);
}
</style>